<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>time format</title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript" src="../js/dayjs.min.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>日期: {{curTime}}</h2>
            <h2>日期2: {{fTime3()}}</h2>
            <h2>日期3: {{fTime2}}</h2>
            <h2>日期4: {{curTime | fmt() | myslice}}</h2>
        </div> 
    </body>
    <script>
        // 全局过滤器
        Vue.filter("fmt", function(value){
            return dayjs(value).format("YYYY-MM-DD HH:mm:ss")
        })
        const vm = new Vue({
            el: "#root",
            data:{
                curTime: 1697727066738
            },
            methods: {
                fTime3(){
                    return dayjs(this.curTime).format("YYYY-MM-DD HH:mm:ss")
                }
            },
            computed:{
                fTime2(){
                    return dayjs(this.curTime).format("YYYY-MM-DD HH:mm:ss")
                }
            },
            // 局部过滤器
            filters:{
                // fmt(value){
                //     return dayjs(value).format("YYYY-MM-DD HH:mm:ss")
                // },
                myslice(value){
                    return value.slice(0, 4)
                }
            }
        })
    </script>
</html> 